<template>
	<view class="content">
		<u-navbar :fixed="false" :title="moduleName" :autoBack="true" :safeAreaInsetTop="true"
			leftIconColor="#fff"></u-navbar>


		<view class="content_main">
			<uni-forms ref="baseForm" :modelValue="FormData" label-position="left" class="FormDataBox"
				label-width="90px">

				<uni-forms-item name="EmplCode" label="作业员编号">
					<uni-easyinput type="text" :disabled="true" v-model="FormData.EmplCode" trim="all"
						:clearable="false" placeholder="自动生成"></uni-easyinput>
				</uni-forms-item>

				<uni-forms-item name="EmplName" required label="作业员名称">
					<uni-easyinput type="text" v-model="FormData.EmplName" trim="all" :clearable="true"
						placeholder="请输入作业员名称"></uni-easyinput>
				</uni-forms-item>

				<uni-forms-item name="SexName" required label="性别">
					<view @click="ChangeSex">
						<uni-easyinput type="text" v-model="FormData.SexName" :readonly="true" :inputBorder="false"
							trim="all" :clearable="false" placeholder="请选择员工性别" suffixIcon="right"></uni-easyinput>
					</view>
				</uni-forms-item>

				<uni-forms-item name="Remark" RowCloumn="column" label="备注">
					<view class="" style="padding: 10rpx 20rpx ;width: 100%;">
						<u--textarea v-model="FormData.Remark" placeholder="请输入备注" count maxlength="150"></u--textarea>
					</view>
				</uni-forms-item>


				<view class="x-c" style="margin-top: 10rpx;">
					<button class="SubmitBtn" style="width: 100%;" type="primary" @click="SubmitBtn">
						<text class="Text">提交</text>
					</button>
				</view>
			</uni-forms>

		</view>

		<!-- 性别操作菜单 -->
		<u-action-sheet :safeAreaInsetBottom="true" :closeOnClickOverlay="true" :closeOnClickAction="true"
			@close="closeSexPopup" :actions="SexList" @select="selectClick" :show="ShowSexPopup" ShowText="SexName"
			cancelText="取消"></u-action-sheet>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				moduleName: '',
				FormData: {
					EmplCode: '',
					EmplName: '',
					EmplID: '',

					SexName: '',
					Sex: '',

					Remark: ''
				},
				rules: { // 自定义校验
					EmplName: {
						rules: [{
							required: true,
							errorMessage: ' '
						}]
					},
					SexName: {
						rules: [{
							required: true,
							errorMessage: ' '
						}]
					},
				},

				ShowSexPopup: false, // 是否选中性别
				SexList: [{
						SexName: '男',
						Sex: 1
					},
					{
						SexName: '女',
						Sex: 0
					}
				],
			};
		},
		onLoad(option) {
			if (option.Type == 'add') {
				this.moduleName = '添加作业员';
			} else {
				this.moduleName = '编辑作业员';

				this.FormData = Object.assign(this.FormData, this.$store.state.TicketModule.EditDataInfo);
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.baseForm.setRules(this.rules);
		},
		onUnload() { // 监听页面卸载,
			this.$store.commit('TicketModule/ChangeAndSetStateData', {
				Name1: 'EditDataInfo',
				data: {}
			});
		},
		methods: {
			ChangeSex() {
				this.ShowSexPopup = true;
			},
			closeSexPopup() {
				this.ShowSexPopup = false;
			},
			selectClick(data) {
				this.FormData = Object.assign(this.FormData, data);
			},
			SubmitBtn() {
				let that = this;
				// 通过ref拿到校验结果
				this.$refs['baseForm'].validate().then(res => {
					that.$utils.showLoading('正在提交...');

					setTimeout(() => {

						that.$utils.hideLoading()
						uni.showToast({
							title: '提交成功！',
							icon: 'success',
							duration: 1500
						});


						uni.navigateBack({
							success: function() {
								// 刷新记录列表
								uni.$emit('Refresh_Product', 'refresh');
								// 刷新basescreen列表
								uni.$emit('Refresh_BaseScreen', 'refresh');
							}
						});
					}, 2000)

				}).catch((err) => {
					that.$utils.msg('请完善表单', 1000)
					console.log(err)
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f5f5f5;

		// 表单内容
		.FormDataBox {
			width: 90%;
			margin: 0 auto;

			.uni-forms-item {
				padding: 10rpx 20rpx;
				background-color: #fff;
				margin-top: 20rpx;

				&:first-child .uni-forms-item__label {
					color: #b5b5b5 !important;
				}
			}

			// 输入框上层类名
			.uni-easyinput__content {
				background-color: transparent !important;
				border: none !important;
				// border-bottom: 1px solid #c6c6c6 !important;
			}

			.uni-easyinput__content-input {
				padding-left: 30rpx !important;
			}
		}

		.SubmitBtn {
			background-color: $main-background-color;
		}

	}
</style>